<template>
  <div>
      <!-- 头部名字标题 -->
      <el-dialog  :title="restaurantName" width="500px" height= "600px"
      :visible="dialogVisibleVuex" :before-close="changeDialogVisible">

      <!-- 修改中英文名字 -->
      <div style="margin-top : 15px;">
        <el-input placeholder="请输入内容" :value="restaurantName" @input='restinput'>
          <!-- :value是 输入的值进行和 rowData进行绑定, @input是input框里面的值，值得改变影响vuex里面的值-->
            <el-select v-model="valueLanguage" slot="prepend">
                <el-option v-for="(item,index) in optionNew" :key="index"
                :label="item.label" :value="item.valueLanguage" ></el-option>
            </el-select>
        </el-input>
    </div>

        <!-- 选择标签区域 -->
    <div class="restaurant-tags-container">
        <div class="selct-tags">
            <el-select v-model="value" placeholder="请选择"
            @change="addTags(value)">
                <el-option v-for="item in tagsList" :label="$t('tags.'+item.toLowerCase())"
                :key="item" :value="$t( item.toLowerCase())">
                  {{ $t("tags."+item.toLowerCase()) }}</el-option>
            </el-select>
        </div>
        <!-- 标签区域 -->
        <div class="restaurant-own-tags">
            <el-tag v-for="(tag,index) in chooseTags" :key="tag" closable
            @close="handleClose(index)"
            >{{ $t("tags."+tag.toLowerCase()) }} </el-tag>
        </div>
    </div>

        <!-- 纽约时间 -->
    <div class="box-card">
        <el-col :span="24">
            <el-card shadow="always">纽约时间：{{NewYorkTime}}</el-card>
        </el-col>
    </div>

    <!-- 时间选择 -->
    <div class="box-time">
        <timeChange />
    </div>

      <!-- 脚下的2个按钮 -->
      <span slot="footer" class="dialog-footer">
          <el-button @click="changeDialogVisible">取 消</el-button>
          <el-button type="primary" @click="changeDialogVisible();sendModifyRes()">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment-timezone';
import _ from 'lodash';
import { mapState, mapActions } from 'vuex';
import timeChange from '@/views/admin/components/restaurant/components/timeChange.vue';

export default {
  props: ['everyRow'],
  components: { timeChange },
  data() {
    return {
      value: '',
      NewYorkTime: '',
      timerInterval: '',
      valueLanguage: 'zh-CN',
      select: '',
      optionNew: [
        { valueLanguage: 'zh-CN', label: '中文' },
        { valueLanguage: 'en-US', label: '英文' },
      ],
    };
  },

  methods: {
    ...mapActions([
      'dialogVisible',
      'getTags',
      'addTagsVuex',
      'updateName',
      'modifyRestaurant',
    ]),

    // 改变vuex里面dialogVisible，对话框变成false, 变得不显示了
    changeDialogVisible() {
      this.dialogVisible(false);
    },

    handleClose(index) { // 删除tag
      this.chooseTags.splice(index, 1);
    },

    addTags(item) { // 添加标签
    //   console.log('item', item);
      this.addTagsVuex(item);
    },

    restinput(v) {
      // console.log('v', v); // input 框里面输入的值, 输入值的时候触发
      // console.log('lang==>', this.valueLanguage);
      this.updateName({ name: v, lang: this.valueLanguage });
    },

    sendModifyRes() {
      this.modifyRestaurant();
    },
  },

  created() {
    this.getTags(); // 发送请求, 获取tags

    // 加上时区就是美国的时间了，然后format就能显示美国时间了，加上locale将的英文换成中文,设置定时器，在创建
    // 的时候开启，在destroyed,要先初始化在页面显示的值，然后改变赋值NewYorkTime//* 'America/New_York'是给的默认值 */
    this.timerInterval = setInterval(() => {
      // console.log(111);
      const getRowData = this.rowData;
      const getTimezone = _.get(getRowData, 'timezone', 'America/New_York');
      this.NewYorkTime = moment().tz(getTimezone).locale('zh_cn').format('YYYY-MM-DD  HH:mm:ss dddd');
    }, 1000);
  },

  destroyed() {
    // console.log(22);
    clearInterval(this.timerInterval);
  },

  computed: {
    ...mapState({
      shopList: (state) => state.restaurant.list,
      dialogVisibleVuex: (state) => state.restaurant.dialogVisible,
      rowData: (state) => state.restaurant.rowData,
      tagsList: (state) => state.restaurant.tagsList,
      chooseTags: (state) => state.restaurant.chooseTags,
    }),

    // 对话框的名字，用lodash是防止报错的
    restaurantName() {
      return _.get(this, `rowData.name[${this.valueLanguage}]`);
    },
  },
};
</script>

<style>

</style>
